<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{/asserts/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
</head>
<body>
<!--
如果要做文件上传，必须加enctype="multipart/form-data"
如果不做文件上传，这个属性绝对不能加
-->
<form th:action="@{/front/saveImage}" class="form-horizontal" method="post" style="width: 400px;margin: 20px auto" enctype="multipart/form-data">
    <div class="form-group">
        <label class="control-label col-md-4">请输入图片名称：</label>
        <div class="col-md-8">
            <input type="text" name="image_name" class="form-control"/>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-md-4">请选择图片类型：</label>
        <div class="col-md-8">
            <select name="type_id" class="form-control">
                <option value="">请选择图片类型</option>
                <option th:each="type:${types}" th:text="${type.type_name}" th:value="${type.type_id}"></option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-md-4">请选择图片：</label>
        <div class="col-md-8">
<!--            <video controls  width="300px"height="200px"   id="gly_video" style="display: none">-->
<!--                <source src="" type="video/mp4"></source>-->
<!--            </video>-->
            <img th:src="@{${image_file}}" width="300px" height="200px" controls id="gly_image" style="display: none">
            <!--不要和实体类的属性名称写成一样的-->
            <input type="file" name="image_file" id="image_file"/>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-4"></label>
        <div class="col-md-8">

            <button type="submit" class="btn btn-info">确认</button>

        </div>
    </div>
</form>

<script type="text/javascript" th:src="@{/asserts/js/jquery-1.12.3.min.js}"></script>
<script type="text/javascript" th:src="@{/asserts/js/bootstrap.min.js}"></script>


<script>
    //在input file内容改变的时候触发事件
    $('#image_file').change(function(){
        //获取input file的files文件数组;
        //$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
        //这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
        var file = $('#image_file').get(0).files[0];
        //创建用来读取此文件的对象
        var reader = new FileReader();
        //使用该对象读取file文件
        reader.readAsDataURL(file);
        //读取文件成功后执行的方法函数
        reader.onload=function(e){
            //读取成功后返回的一个参数e，整个的一个进度事件
            console.log(e);
            //选择所要显示图片的img，要赋值给img的src就是e中target下result里面
            //的base64编码格式的地址
            $('#gly_image').css("display","block")
            $('#gly_image').get(0).src = e.target.result;
        }
    })
</script>
</body>
</html>